<template>
    <div class="select_class">
            <header ><a @click="$api.goBack()" class="back"></a><span>教师管理</span><a class="add" v-if="useInfo.tsMenuList[2].voOperate.addObj" @click="showDetail()" >添加</a></header>

                <mt-search v-model="searchValue" style="height:auto;padding:0;">
                </mt-search>
                <div class="flex_wrap switch_wrap"><mt-switch v-model="showState">显示离职</mt-switch></div>
            <ul >
                <li v-for="(item,index) in showData" :key="index" v-if="item.workState||showState" >
                    <div class="main"  >
                        <div class="flex" style="width:4.7rem;" @click="showDetail(index)">
                            <div class="head">
                                <img :src="$api.formatterImg(item.teacherPhoto)" />
                            </div>
                            <div class="classroom"  >
                                <div class="className">{{item.teacherName}}</div>
                                <div class="teacher">{{item.typeName}}</div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="teacher" style="color:green" v-if="item.workState" >在职</div>
                            <div class="teacher" style="color:#ccc;" v-if="!item.workState" >离职</div>
                        </div>
                        <div @click="$api.tell(item.teacherPhone)" class="tell_phone"></div>
                    </div>
                </li>
            </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                showData: [],
                serachData: [], //用于存储数据,以便于查询用
                searchValue: '',
                showOut: 0,
                pageNum: 1,
                studentId: undefined,
                pageSize: 1000,
                showState: false,
            }
        },
        watch: {
            searchValue(val) {
                this.showData = this.serachData.filter((element, index, self) => {
                    let needShow = false;
                    element.EnglishName.map(x => {
                        if (x.indexOf(val.toUpperCase()) != -1) { //遍历缩略首字母
                            needShow = true;
                        }
                    })
                    return element.teacherName.indexOf(val) != -1 || needShow //如果是全拼的也匹配成功
                })
            },
        },
        computed: {
            siteData: function() {
                var array = [];
                let AllZiMu = this.showData.map(x => { //从 showData里面提取以sortName为子对象的数组
                    return x.sortName
                })
                AllZiMu = AllZiMu.filter((element, index, self) => { //过滤相同子节点
                    return self.indexOf(element) === index;
                })
                return AllZiMu;
                // this.showData.forEach(element => {


                // });
            }
        },
        watch: {
            showState(newValue, oldValue) {
                if (newValue) {
                    localStorage.setItem('showState', true)
                } else {
                    localStorage.setItem('showState', false)
                }

            }
        },
        methods: {
            showDetail(index) {

                if (index || index == 0) {
                    var teacherId = this.showData[index].teacherId;
                    sessionStorage.setItem("teacherId", teacherId);
                    this.$api.clearItem("teacherId");
                } else {
                    this.$api.clearItem("");
                }
                this.$router.push({
                    path: 'teacherDetail'
                })
            },
            getUseInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
                let showState = JSON.parse(localStorage.getItem("showState"));
                if (showState) {
                    this.showState = showState
                }
            },
            getDetail() {
                var url = "/teacher/selectPage"
                var params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    schoolId: this.useInfo.schoolId,
                }
                this.useInfo.studentList.forEach(o => {
                    if (o.checked) {
                        params.studentId = o.studentId;
                        this.studentId = o.studentId;
                    }
                })
                this.$api.post(url, params, (data) => {
                    this.serachData = this.showData = data.info.list.map(x => {
                        x.EnglishName = this.$getCase.query(x.teacherName);
                        return x
                    })
                })

            },
        },
        created() {
            this.getUseInfo();
            this.getDetail();
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>